<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>列表渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <table border="1">
        <tr>
            <td>循环下标</td>
            <td>书名</td>
            <td>作者</td>
        </tr>
        <!--<tr v-for="book in/of books">-->
        <tr v-for="(book,index) in books">
            <td align="center">{{index}}</td>
            <td align="center">{{book.name}}</td>.
            <td align="center">{{book.author}}--{{index}}</td>
        </tr>
    </table>
    <hr>
    <div v-for="s in site">{{s}}</div>
    <hr>
    <div v-for="(s,key,x) in site">{{key}}--{{s}}--{{x}}</div>
</div>


</body>


<script>
    var app = new Vue({
        el: '#app',
        data: {
           books:[
               {
                   name:'三国演义',
                   author:'罗贯中',
               },
               {
                   name:'红楼梦',
                   author:'曹雪芹',
               },
               {
                   name:'西游记',
                   author:'吴承恩',
               },
               {
                   name:'水浒传',
                   author:'施耐庵',
               },
               ],
            site:{
                url:"www.seeumt.top",
                name:'tips',
                server:'github'
            }
        }
    })

</script>
</html>
